<template>
  <div>
    <div class="operator-area">
      <a-form layout="inline">
        <a-form-item label="当前年份">
          <a-input-number disabled v-model="defaultYear"/>
        </a-form-item>
        <a-form-item label="添加列数">
          <a-input-number v-model="addColNum" @change="handleNumInputChange"/>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-area">
      <a-table
        rowKey="id"
        bordered
        :key="tableSetting.key"
        :columns="tableColumns"
        :loading="tableSetting.loading"
        :dataSource="tableDataSource"
        :pagination="false"
        :rowSelection="{
          selectedRowKeys: tableSetting.selectedRowKeys,
          onChange: onTabalRowChange
        }"
        :scroll="{ x: 1500 }">
       </a-table>
    </div>
    <div class="table-data">
      <a-card :bodyStyle="{ height: '500px', overflow: 'auto' }">
        <a-row>
          <a-col :span="12">
            <pre>{{ tableDataSource }}</pre>
          </a-col>
          <a-col :span="12">
            <pre>{{ tableColumns }}</pre>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils/utils'
export default {
  name: "MergeThTable",
  components: {
  },
  mounted () {
    // 数据备份一份
    this.tableDataSourceBat = this.tableDataSource
    this.tableColumnsBat = this.tableColumns
  },
  data () {
    return {
      tableSetting: {
        key: +new Date(),
        loading: false,
        pagination: {},
        selectedRowKeys: [],
        editingRecordIndex: ""
      },
      tableColumns: [
        {
          title: "项目名称",
          dataIndex: "name",
          width: 250,
          align: "left",
          customCell: (record, rowIndex) => {
            return {
              class: ['type-class']
            }
          }
        },
        {
          title: "项目编码",
          dataIndex: "code",
          width: 250,
          align: "left",
          customCell: (record, rowIndex) => {
            return {
              class: ['type-class']
            }
          }
        },
        {
          title: "项目地址",
          dataIndex: "addr",
          width: 150
        },
        {
          title: "负责人",
          dataIndex: "fzUser",
          width: 150
        },
        {
          title: "立项年度",
          dataIndex: "lxnd",
          width: 150,
        },
        {
          title: "建设性质",
          dataIndex: "jsxz",
          width: 100,
          customRender: (text, record, index) => {
            return record.jsxzText
          },
        },
        {
          title: "2021年",
          children: [
            {
              title: '收入',
              dataIndex: 'SR2021',
              width: 100,
            },
            {
              title: '支出',
              dataIndex: 'ZC2021',
              width: 100,
            },
          ]
        }
      ],
      tableColumnsBat: [],
      tableDataSourceBat: [],
      tableDataSource: [
        {
          id: 1,
          name: "建设项目1", 
          type: "3",
          typeText: "收费公路",
          code: "132664974474",
          addr: "北京市",
          addrVisible: false,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
          SR2021: "0.00",
          ZC2021: "0.00"
        },
        {
          id: 2,
          name: "建设项目2", 
          type: "5",
          typeText: "民用机场",
          code: "132664978874",
          addr: "天津市",
          addrVisible: true,
          jsxz: 2,
          jsxzText: "改建",
          lxnd: "2020",
          fzUser: "李松",
          editVisible: false,
          SR2021: "0.00",
          ZC2021: "0.00"
        }
      ],
      editColumns: [
        { value: "lxnd", type: "select" },
      ],
      editingColumn: "",
      editingRecord: "",
      defaultYear: new Date().getFullYear(),
      addColNum: 0
    }
  },
  methods: {
    /** 表格前置选中框选择 */
    onTabalRowChange (selectedRowKeys) {
      console.log('selectedRowKeys onTabalRowChange: ', selectedRowKeys)
      this.tableSetting.selectedRowKeys = selectedRowKeys;
    },
    /**
     * input框输入内容change
     */
    handleNumInputChange (e) {
      let resColums = deepClone(this.tableColumnsBat)
      let resData = deepClone(this.tableDataSourceBat)
      if (this.addColNum > 0) {
        for (let i = 1; i <= this.addColNum; i++) {
          let year = this.defaultYear + i
          let yearSR = 'SR' + year
          let yearZC = 'ZC' + year
          resColums.push({
            title: year + "年",
            children: [
              {
                title: '收入',
                dataIndex: yearSR,
                width: 100,
              },
              {
                title: '支出',
                dataIndex: yearZC,
                width: 100,
              },
            ]
          })
          resData.forEach(element => {
            element[yearSR] = "0.00"
            element[yearZC] = "0.00"
          });
        }
        this.tableColumns = resColums
        this.tableDataSource = resData
      }
    }
  }
}
</script>

<style lang="less">
</style>
